<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Add Student</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'GetClassesServlet',
                type: 'GET',
                dataType: 'json',
                success: function(data){
                    var select = $('#class_name');
                    $.each(data, function(index, item) {
                        select.append('<option value="' + item + '">' + item + '</option>');
                    });
                    console.log(data);
                }
            });
        });
    </script>
</head>
<body>
<div class="container">
    <h1>添加学生</h1>
    <form id="studentForm" action="AddStudentServlet" method="post">
        <label for="stu_name">姓名：</label>
        <input type="text" id="stu_name" name="stu_name">

        <label for="stu_no">学号：</label>
        <input type="text" id="stu_no" name="stu_no">

        <label for="class_name">班级：</label>
        <select id="class_name" name="class_name">
            <option value="">请选择班级</option>
        </select>

        <input type="submit" value="添加学生">
    </form>

    <script>
        document.getElementById("studentForm").onsubmit = function(event) {
            // 获取表单字段的值
            var stuName = document.getElementById("stu_name").value.trim();
            var stuNo = document.getElementById("stu_no").value.trim();

            // 验证学号是否为整数且长度不超过整数范围
            if (stuNo !== "") {
                if (isNaN(stuNo) || parseInt(stuNo) > 2147483647) { // 2147483647 是 INT_MAX
                    alert("学号必须是长度不能超过整数范围的整数");
                    return false;
                }
            }

            // 验证姓名是否为字符串
            if (stuName !== "") {
                if (!isNaN(stuName)) {
                    alert("姓名必须是字符串");
                    return false;
                }
            }

            return true;
        };
    </script>

</div>
</body>
</html>
